<script setup lang="ts">
import { postLoginAPI, postLoginWxMinAPI, postLoginWxMinSimpleAPI } from '@/services/login'
import { useMemberStore } from '@/stores'
import type { LoginResult } from '@/types/member'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// #ifdef MP-WEIXIN
// 获取 code 登录凭证
let code = ''
onLoad(async () => {
  const res = await wx.login()
  code = res.code
})

// 获取用户手机号码
const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {
  const { encryptedData, iv } = ev.detail
  const res = await postLoginWxMinAPI({ code, encryptedData, iv })
  loginSuccess(res.result)
}
// #endif

// 模拟手机号码快捷登录（开发练习）
const onGetphonenumberSimple = async () => {
  const res = await postLoginWxMinSimpleAPI('13123456789')
  loginSuccess(res.result)
}

const loginSuccess = (profile: LoginResult) => {
  // 保存会员信息
  const memberStore = useMemberStore()
  memberStore.setProfile(profile)
  // 成功提示
  uni.showToast({ icon: 'success', title: '登录成功' })
  setTimeout(() => {
    // 页面跳转
    // uni.switchTab({ url: '/pages/my/my' })
    uni.navigateBack()
  }, 500)
}

// #ifdef H5
// 传统表单登录，测试账号：13123456789 密码：123456，测试账号仅开发学习使用。
const form = ref({
  account: '13123456789',
  password: '',
})

// 表单提交
const onSubmit = async () => {
  const res = await postLoginAPI(form.value)
  loginSuccess(res.result)
}
// #endif
</script>

<template>
  <view class="flex flex-col h-full px-5">
    <view class="flex-1 center">
      <image
        class="h-25 w-25 mt-20"
        src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/logo_icon.png"
      ></image>
    </view>
    <view class="flex flex-col h-[60vh] px-[20rpx] pt-[40rpx] pb-[20rpx]">
      <!-- 网页端表单登录 -->
      <!-- #ifdef H5 -->
      <input
        v-model="form.account"
        class="w-full h-80rpx text-28rpx border border-solid border-#ddd rounded-72rpx px-30rpx mb-25rpx"
        type="text"
        placeholder="请输入用户名/手机号码"
      />
      <input
        v-model="form.password"
        class="w-full h-80rpx text-28rpx border border-solid border-#ddd rounded-72rpx px-30rpx mb-25rpx"
        type="text"
        password
        placeholder="请输入密码"
      />
      <button
        @tap="onSubmit"
        class="w-full h-80rpx flex center text-28rpx text-white bg-#28bb9c rounded-72rpx"
      >
        登录
      </button>
      <!-- #endif -->

      <!-- 小程序端授权登录 -->
      <!-- #ifdef MP-WEIXIN -->
      <button
        class="flex center w-full h-[80rpx] text-[28rpx] rounded-[72rpx] bg-[#28bb9c] text-white"
        open-type="getPhoneNumber"
        @getphonenumber="onGetphonenumber"
      >
        <text class="text-[40rpx] icon-phone"></text>
        手机号快捷登录
      </button>
      <!-- #endif -->
      <view class="flex-1 px-[70rpx] pt-[70rpx]">
        <view class="w-[440rpx] h-[1px] bg-[#ddd] text-[26rpx] text-[#999] relative">
          <text class="bg-[#fff] absolute top-[-18rpx] left-[35%]">其他登录方式</text>
        </view>
        <!-- 通用模拟登录 -->
        <button
          class="mt-[70rpx] flex flex-col center bg-white border-0"
          style="border: 0px"
          @tap="onGetphonenumberSimple"
        >
          <text
            class="icon-phone w-[80rpx] h-[80rpx] border border-solid border-#444 rounded-full center"
          ></text>
          <text class="text-[24rpx] text-#444">模拟快捷登录</text>
        </button>
      </view>
      <text class="absolute bottom-[80rpx] left-5 right-5 text-[22rpx] text-gray-400 text-center">
        登录/注册即视为你同意《服务条款》和《小兔鲜儿隐私协议》
      </text>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
}

// .viewport {
//   display: flex;
//   flex-direction: column;
//   height: 100%;
//   padding: 20rpx 40rpx;
// }

// .logo {
//   flex: 1;
//   text-align: center;
//   image {
//     width: 220rpx;
//     height: 220rpx;
//     margin-top: 15vh;
//   }
// }

// .login {
//   display: flex;
//   flex-direction: column;
//   height: 60vh;
//   padding: 40rpx 20rpx 20rpx;

//   .input {
//     width: 100%;
//     height: 80rpx;
//     font-size: 28rpx;
//     border-radius: 72rpx;
//     border: 1px solid #ddd;
//     padding-left: 30rpx;
//     margin-bottom: 20rpx;
//   }

//   .button {
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     width: 100%;
//     height: 80rpx;
//     font-size: 28rpx;
//     border-radius: 72rpx;
//     color: #fff;
//     .icon {
//       font-size: 40rpx;
//       margin-right: 6rpx;
//     }
//   }

//   .phone {
//     background-color: #28bb9c;
//   }

//   .wechat {
//     background-color: #06c05f;
//   }

//   .extra {
//     flex: 1;
//     padding: 70rpx 70rpx 0;
//     .caption {
//       width: 440rpx;
//       line-height: 1;
//       border-top: 1rpx solid #ddd;
//       font-size: 26rpx;
//       color: #999;
//       position: relative;
//       text {
//         transform: translate(-40%);
//         background-color: #fff;
//         position: absolute;
//         top: -12rpx;
//         left: 50%;
//       }
//     }

//     .options {
//       display: flex;
//       justify-content: center;
//       align-items: center;
//       margin-top: 70rpx;
//       button {
//         padding: 0;
//         background-color: transparent;
//         &::after {
//           border: none;
//         }
//       }
//     }

//     .icon {
//       font-size: 24rpx;
//       color: #444;
//       display: flex;
//       flex-direction: column;
//       align-items: center;

//       &::before {
//         display: flex;
//         align-items: center;
//         justify-content: center;
//         width: 80rpx;
//         height: 80rpx;
//         margin-bottom: 6rpx;
//         font-size: 40rpx;
//         border: 1rpx solid #444;
//         border-radius: 50%;
//       }
//     }
//     .icon-weixin::before {
//       border-color: #06c05f;
//       color: #06c05f;
//     }
//   }
// }

// .tips {
//   position: absolute;
//   bottom: 80rpx;
//   left: 20rpx;
//   right: 20rpx;
//   font-size: 22rpx;
//   color: #999;
//   text-align: center;
// }
</style>
